<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>画室办公自动化系统</title>
	<%@ include file="/common/meta.jsp" %>
<link rel="stylesheet" type="text/css" href="${ctx}/ext-3.2.0/resources/css/ext-all.css" />
    
    <style type="text/css">
    html, body {
        font:normal 12px verdana;
        margin:0;
        padding:0;
        border:0 none;
        overflow:hidden;
        height:100%;
    }
    p {
        margin:5px;
    }
    
    .nav {
        background-image:url(${ctx}/image/folder_go.png);
    }
    
    .homeImg{
    	background-image:url(${ctx}/image/home.png);
    }
    .tabs {
	    background-image:url(${ctx}/image/tabs.gif ) !important;
	}
    </style>

    <!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="${ctx}/ext-3.2.0/adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->

    <script type="text/javascript" src="${ctx}/ext-3.2.0/ext-all.js"></script>
	<script type="text/javascript" src="${ctx}/ext-3.2.0/src/locale/ext-lang-zh_CN.js"></script>
    <!-- EXAMPLES  -->
    <script type="text/javascript" src="${ctx}/ext-3.2.0/examples.js"></script>
    <script type="text/javascript">Ext.BLANK_IMAGE_URL = "${ctx}/ext-3.2.0/resources/images/default/s.gif";</script>
    <script type="text/javascript" src="${ctx}/ext-3.2.0/ux/TabCloseMenu.js"></script>
 
    
</head>
<body>
	<!-- header -->
	<div id="nav_area" class="x-date-bottom">
        <table cellspacing="0" border="0" cellpadding="0" width="100%">
            <tr>
                <td><div style="font-size:18px;font-weight:bold;"><img height="40" width="180" src="${ctx}/image/logo.jpg"/></div></td>
                <td align="right" style="padding-right: 5px">OA</td>
            </tr>
        </table>
    </div>
    <!-- use class="x-hide-display" to prevent a brief flicker of the content -->
    <!-- 学员管理 -->
	<!-- <div id="studentManager"  >
			<div style="cursor:pointer;" >&nbsp;&nbsp;&nbsp;&nbsp;<img style="margin-top: 4px;" src="${ctx}/image/user.png"/><font size="2" style="text-align:center;">学员报名</font></div>
	</div> -->
	<ul id="studentManager">
      <li><a id="knowledge" class="menubar" onclick="addTab();">学员列表</a></li>
    </ul>
    
    <ul id="teacherManager">
      <li><a id="knowledge" class="menubar" onclick="addTab();">教师列表</a></li>
    </ul>
    
    <div id="south" class="x-hide-display">
        <p align="center">Copyright©2010 超拓网络  www.sooll.com.cn 版权所有 </p>
    </div>
</body>
</html>
<script type="text/javascript">
var index = 0;
function addTab(){
    Ext.getCmp('tabPanel').add({
        title: 'New Tab ' + (++index),
        iconCls: 'tabs',
        html: 'Tab Body ' + (index) + '<br/><br/>'
                + Ext.example.bogusMarkup,
        closable:true
    }).show();
}
    
    Ext.onReady(function(){
    	var item1 = new Ext.Panel({
            title: '学员管理',
            contentEl: 'studentManager',
            cls:'empty',
            iconCls: 'nav'
        });

        var item2 = new Ext.Panel({
            title: '教师管理',
            html: '&lt;empty panel&gt;',
            cls:'empty',
            iconCls: 'nav'
        });

        var item3 = new Ext.Panel({
            title: '班级管理',
            html: '&lt;empty panel&gt;',
            cls:'empty',
            iconCls: 'nav'
        });

        var item4 = new Ext.Panel({
            title: '财务管理',
            html: '&lt;empty panel&gt;',
            cls:'empty',
            iconCls: 'nav'
        });

        var item5 = new Ext.Panel({
            title: '系统管理',
            html: '&lt;empty panel&gt;',
            cls:'empty',
            iconCls: 'nav'
        });
        // NOTE: This is an example showing simple state management. During development,
        // it is generally best to disable state management as dynamically-generated ids
        // can change across page loads, leading to unpredictable results.  The developer
        // should ensure that stable state ids are set for stateful components in real apps.
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        
        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
            // create instance immediately
            {
	            region: 'north',
	            height: 80,
	            margins: '0 5 0 5',
	            contentEl: 'nav_area',
	            bbar: new Ext.Toolbar(['->', {
	                text: 'WebIM',
	                iconCls: 'cog',
	                handler: function() {
	                    	//webim.show();
	                }
	            }, {
	                text: 'Setting',
	                iconCls: 'config',
	                handler: function() {
	                }
	            }, {
	                text: '退出',
	                icon: '${ctx}/image/exit.png',
	                handler: function() {
	                    location.href="${ctx}/j_spring_security_logout";
	                }
	            }])
	        }, {
                // lazily created panel (xtype:'panel' is default)
            	region: 'south',
                contentEl: 'south',
                split: true,
                height: 30,
                minSize: 100,
                maxSize: 200,
               // collapsible: true,
               // title: 'South',
                margins: '0 5 5 5'
            },{
                region: 'west',
                id: 'west-panel', // see Ext.getCmp() below
                title: '功能菜单',
                split: true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins: '0 0 0 5',
                layout: {
                    type: 'accordion',
                    animate: true
                },
                items: [item1,item2,item3,item4,item5]
            },
            // in this instance the TabPanel is not wrapped by another panel
            // since no title is needed, this Panel is added directly
            // as a Container
            new Ext.TabPanel({
                id:'tabPanel',
                region: 'center', // a center region is ALWAYS required for border layout
                deferredRender: false,
                margins: '0 5 0 0',
                activeTab: 0,     // first tab initially active
                items: [{html: '<p>Some settings in here.</p>', title: '首页',iconCls:'homeImg',closable: true, autoScroll: true}],
                defaults: {autoScroll:true},
                enableTabScroll:true,
                plugins: new Ext.ux.TabCloseMenu()
                
            })]
        });
       	
        
        addTab();
        
    });
    </script>